<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>登录前-引导页2</title>
  <style>
    /* 基础样式重置 */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Helvetica', 'Arial', sans-serif;
    }

    /* 自定义工具类 */
    .text-shadow {
      text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
    }

    .btn-hover {
      transition: all 0.3s ease;
    }

    .btn-hover:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    }

    /* 主体样式 */
    body {
      background-color: #F7F9FC;
      min-height: 100vh;
      display: flex;
      justify-content: center;
    }

    .app-container {
      width: 100%;
      max-width: 480px;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    /* 插图区域 */
    .illustration-section {
      flex: 1;
      background-color: white;
      padding: 40px 20px;
      position: relative;
      overflow: hidden;
    }

    /* 蓝色圆点背景 */
    .dot-pattern {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 280px;
      height: 280px;
      background-image: radial-gradient(#165DFF 5%, transparent 5%);
      background-size: 20px 20px;
      opacity: 0.15;
      border-radius: 50%;
      transform: translate(-50%, -50%);
    }

    /* 插图容器 */
    .illustration-container {
      position: relative;
      width: 100%;
      height: 100%;
      max-height: 320px;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    /* 左侧医生形象 */
    .doctor-person {
      position: absolute;
      top: 60px;
      left: 50px;
      width: 110px;
      height: 180px;
      z-index: 2;
    }

    .doctor-head {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background-color: #E0E0E0;
      margin: 0 auto;
      position: relative;
    }

    .doctor-hair {
      position: absolute;
      top: -3px;
      left: 50%;
      transform: translateX(-50%);
      width: 45px;
      height: 30px;
      background-color: #424242;
      border-radius: 50% 50% 0 0;
    }

    .doctor-glasses {
      position: absolute;
      top: 12px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      gap: 5px;
    }

    .doctor-glass {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      border: 2px solid #212121;
    }

    .doctor-body {
      width: 60px;
      height: 90px;
      background-color: white;
      border-radius: 25px 25px 0 0;
      margin: 5px auto 0;
      border: 2px solid #424242;
    }

    .doctor-coat {
      position: absolute;
      top: 45px;
      left: 35px;
      width: 40px;
      height: 100px;
      background-color: #E0E0E0;
      border-radius: 0 0 15px 15px;
      z-index: -1;
    }

    .doctor-legs {
      display: flex;
      justify-content: center;
      gap: 15px;
      margin-top: 5px;
    }

    .doctor-leg {
      width: 12px;
      height: 30px;
      background-color: #424242;
      border-radius: 0 0 6px 6px;
    }

    .doctor-hand {
      position: absolute;
      top: 70px;
      right: -10px;
      width: 15px;
      height: 15px;
      background-color: #E0E0E0;
      border-radius: 50%;
    }

    .doctor-file {
      position: absolute;
      top: 65px;
      right: -5px;
      width: 35px;
      height: 45px;
      background-color: #FFDD55;
      border-radius: 3px;
      transform: rotate(15deg);
      z-index: 3;
    }

    /* 信息传递圆点 */
    .info-dots {
      position: absolute;
      top: 100px;
      left: 150px;
      width: 120px;
      height: 60px;
      z-index: 1;
    }

    .info-dot {
      position: absolute;
      width: 12px;
      height: 12px;
      background-color: #165DFF;
      border-radius: 50%;
    }

    .dot-1 {
      left: 0;
      top: 0;
    }

    .dot-2 {
      left: 30px;
      top: 10px;
    }

    .dot-3 {
      left: 60px;
      top: 5px;
    }

    .dot-4 {
      left: 90px;
      top: 15px;
    }

    .dot-5 {
      left: 120px;
      top: 10px;
    }

    /* 对话框 */
    .speech-bubble {
      position: absolute;
      top: 40px;
      right: -30px;
      width: 60px;
      height: 30px;
      background-color: white;
      border: 2px solid #424242;
      border-radius: 15px;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 3px;
    }

    .bubble-dot {
      width: 4px;
      height: 4px;
      background-color: #424242;
      border-radius: 50%;
    }

    /* 右侧两人组 */
    .people-group {
      position: absolute;
      bottom: 40px;
      right: 40px;
      width: 150px;
      height: 200px;
      z-index: 2;
    }

    /* 右侧男性 */
    .right-male {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 90px;
      height: 160px;
    }

    .male-right-head {
      width: 35px;
      height: 35px;
      border-radius: 50%;
      background-color: #424242;
      margin: 0 auto;
    }

    .male-right-body {
      width: 50px;
      height: 70px;
      background-color: white;
      border: 2px solid #424242;
      border-radius: 25px 25px 0 0;
      margin: 5px auto 0;
    }

    .male-right-pants {
      width: 45px;
      height: 35px;
      background-color: #424242;
      margin: -5px auto 0;
      border-radius: 0 0 20px 20px;
    }

    .male-right-legs {
      display: flex;
      justify-content: center;
      gap: 12px;
      margin-top: 5px;
    }

    .male-right-leg {
      width: 10px;
      height: 20px;
      background-color: #424242;
      border-radius: 0 0 5px 5px;
    }

    .male-right-hand {
      position: absolute;
      top: 60px;
      left: -5px;
      width: 12px;
      height: 12px;
      background-color: #424242;
      border-radius: 50%;
    }

    /* 右侧女性 */
    .right-female {
      position: absolute;
      bottom: 30px;
      right: 0;
      width: 80px;
      height: 130px;
    }

    .female-right-head {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background-color: #424242;
      margin: 0 auto;
    }

    .female-right-body {
      width: 45px;
      height: 60px;
      background-color: #424242;
      border-radius: 20px 20px 0 0;
      margin: 5px auto 0;
    }

    .female-right-skirt {
      width: 60px;
      height: 30px;
      background-color: white;
      margin: -5px auto 0;
      border-radius: 0 0 30px 30px;
      border: 2px solid #424242;
    }

    .female-right-legs {
      display: flex;
      justify-content: center;
      gap: 10px;
      margin-top: 5px;
    }

    .female-right-leg {
      width: 10px;
      height: 15px;
      background-color: #424242;
      border-radius: 0 0 5px 5px;
    }

    .female-right-hand {
      position: absolute;
      top: 50px;
      right: -3px;
      width: 12px;
      height: 12px;
      background-color: #424242;
      border-radius: 50%;
    }

    /* 内容区域 */
    .content-section {
      background: linear-gradient(to bottom, #165DFF 0%, #0F4CD8 100%);
      color: white;
      padding: 30px 20px;
      display: flex;
      flex-direction: column;
      flex-shrink: 0;
    }

    .title {
      font-size: 26px;
      font-weight: bold;
      text-align: center;
      margin-bottom: 20px;
      line-height: 1.4;
    }

    .description {
      font-size: 15px;
      line-height: 1.6;
      text-align: center;
      margin-bottom: 30px;
      flex-grow: 1;
    }

    /* 分页指示器 */
    .pagination {
      display: flex;
      justify-content: center;
      gap: 8px;
      margin-bottom: 25px;
    }

    .page-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background-color: rgba(255, 255, 255, 0.3);
    }

    .page-dot.active {
      background-color: white;
      transform: scale(1.3);
    }

    /* 下一步按钮 */
    .next-button {
      background-color: white;
      color: #165DFF;
      border: none;
      border-radius: 30px;
      padding: 14px;
      font-size: 17px;
      font-weight: bold;
      width: 100%;
      cursor: pointer;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    }

    /* 动画效果 */
    .fade-in {
      animation: fadeIn 0.8s ease forwards;
      opacity: 0;
    }

    .doctor-person {
      animation-delay: 0.1s;
    }

    .info-dots {
      animation-delay: 0.4s;
    }

    .people-group {
      animation-delay: 0.7s;
    }

    @keyframes fadeIn {
      from {
        opacity: 0;
        transform: translateY(10px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* 响应式调整 */
    @media (max-width: 320px) {
      .title {
        font-size: 22px;
      }

      .description {
        font-size: 14px;
      }

      .doctor-person {
        left: 30px;
        transform: scale(0.9);
      }

      .people-group {
        right: 20px;
        transform: scale(0.9);
      }
    }

    @media (min-height: 700px) {
      .illustration-section {
        padding-top: 60px;
      }
    }
  </style>
</head>

<body>
  <div class="app-container">
    <!-- 插图区域 -->
    <div class="illustration-section">
      <div class="dot-pattern"></div>
      <div class="illustration-container">
        <!-- 左侧医生形象 -->
        <div class="doctor-person fade-in">
          <div class="doctor-head">
            <div class="doctor-hair"></div>
            <div class="doctor-glasses">
              <div class="doctor-glass"></div>
              <div class="doctor-glass"></div>
            </div>
          </div>
          <div class="doctor-coat"></div>
          <div class="doctor-body"></div>
          <div class="doctor-legs">
            <div class="doctor-leg"></div>
            <div class="doctor-leg"></div>
          </div>
          <div class="doctor-hand"></div>
          <div class="doctor-file"></div>
          <div class="speech-bubble">
            <div class="bubble-dot"></div>
            <div class="bubble-dot"></div>
            <div class="bubble-dot"></div>
          </div>
        </div>

        <!-- 信息传递圆点 -->
        <div class="info-dots fade-in">
          <div class="info-dot dot-1"></div>
          <div class="info-dot dot-2"></div>
          <div class="info-dot dot-3"></div>
          <div class="info-dot dot-4"></div>
          <div class="info-dot dot-5"></div>
        </div>

        <!-- 右侧两人组 -->
        <div class="people-group fade-in">
          <!-- 右侧男性 -->
          <div class="right-male">
            <div class="male-right-head"></div>
            <div class="male-right-body"></div>
            <div class="male-right-pants"></div>
            <div class="male-right-legs">
              <div class="male-right-leg"></div>
              <div class="male-right-leg"></div>
            </div>
            <div class="male-right-hand"></div>
          </div>

          <!-- 右侧女性 -->
          <div class="right-female">
            <div class="female-right-head"></div>
            <div class="female-right-body"></div>
            <div class="female-right-skirt"></div>
            <div class="female-right-legs">
              <div class="female-right-leg"></div>
              <div class="female-right-leg"></div>
            </div>
            <div class="female-right-hand"></div>
          </div>
        </div>
      </div>
    </div>

    <!-- 内容区域 -->
    <div class="content-section">
      <h2 class="title text-shadow">管理自己的信息</h2>
      <p class="description">
        如果因突发疾病等原因无法自行表达意愿，我们将代替您与您的亲属等共享已登记的信息。
      </p>

      <div class="pagination">
        <div class="page-dot active"></div>
        <div class="page-dot"></div>
        <div class="page-dot"></div>
      </div>

      <button class="next-button btn-hover" id="nextBtn">下一步</button>
    </div>
  </div>

  <script>
    // 添加页面加载动画
    document.addEventListener('DOMContentLoaded', () => {
      const elements = document.querySelectorAll('.fade-in');
      elements.forEach(el => el.style.opacity = '0');

      setTimeout(() => {
        elements.forEach(el => {
          el.style.transition = 'opacity 0.8s ease, transform 0.8s ease';
          el.style.opacity = '1';
          el.style.transform = 'translateY(0)';
        });
      }, 100);

      // 下一步按钮点击事件
      document.getElementById('nextBtn').addEventListener('click', function () {
        window.location.href = '登陆前-引导页3.html';
      });
    });
  </script>
</body>

</html>